<template>
  <a-modal
    v-model:visible="visible"
    @before-ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title>新增</template>
    <a-form ref="formRef" :model="formData" auto-label-width>
      <a-form-item field="url">
        <Upload v-model="formData.url" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { Message } from '@arco-design/web-vue';
import { reactive, ref } from 'vue';
import Upload from '@/components/Upload/index.vue';
import useLoading from '@/hooks/useLoading';

const emit = defineEmits(['cancel', 'ok']);
const { loading, setLoading } = useLoading();
const visible = ref(false);
const formData = reactive<API.UserAddRequest>({
  url: ''
});
const formRef = ref();

const open = () => {
  visible.value = true;
};

const handleOk = async done => {
  try {
    const error = await formRef.value.validate();
    if (!error) {
      done(true); // 关闭 Modal
      formRef.value?.resetFields();
      emit('ok');
    } else {
      done(false); // 阻止 Modal 关闭
    }
  } catch (e) {
    Message.error(e.message);
    done(false);
  }
};

function handleCancel() {
  formRef.value?.resetFields();
  emit('cancel');
}

defineExpose({
  open
});
</script>

<style scoped lang="less"></style>
